<template>
	<view class="sbody">
		<!-- 维修工人接收指派信息 -->
		<view>
			<view class="detail_list">
				<view class="detail_item">
					<text>报修企业：</text>
					<text class="detail_item_infos" style="color:#1884eb;">{{recordList.compName}}</text>
				</view>
				<view class="detail_item">
					<text>服务时间：</text>
					<text class="detail_item_infos">{{recordList.serviceTime}}</text>
				</view>
				<view class="detail_item">
					<text>联系人：</text>
					<text class="detail_item_infos" v-if="recordList.userName != null">{{recordList.userName}}</text>
				</view>
				<view class="detail_item">
					<text>联系电话：</text>
					<text class="detail_item_infos" v-if="recordList.userPhone != null">{{recordList.userPhone}}</text>
				</view>
				<view class="detail_item">
					<text>状 态：</text>
					<view>
						<view v-for="item in statusOptions">
							<text class="detail_item_infos" style="color:#1884eb;"
								v-if="item.dictValue == recordList.serviceStatus && recordList.serviceStatus != '1'">{{item.dictLabel}}</text>
						</view>
						<view v-for="item in statusOptions">
							<text class="detail_item_infos" style="color:#00d8a0;"
								v-if="item.dictValue == recordList.serviceStatus && recordList.serviceStatus == '1'">{{item.dictLabel}}</text>
						</view>
					</view>
				</view>
				<view class="detail_item_img">
					<text>附 件：</text>
					<view class="img">
						<image :src="recordList.matterImg"></image>
					</view>
				</view>
				<view class="detail_item_des">
					<text>描 述：</text>
					<text class="detail_item_info">{{recordList.serviceMatter}}</text>
				</view>

				<view class="submitButton" v-if="recordList.serviceStatus === '0'">
					<button @click="send" style="width: 90%; background-color: #1884eb;color: white;">接受</button>
					<button @click="refuse" style="width: 90%; background-color: #1884eb;;color: white;">拒绝</button>
				</view>
			</view>
			<view class="submitButton" v-if="recordList.serviceStatus === '1'"
				style="display: flex;justify-content: flex-end;">
				<button @click="openPupop" style="width: 90%; background-color: #1884eb;color: white;">结束订单</button>
			</view>
			<view class="submitButton" v-if="recordList.serviceStatus === '2'"
				style="display: flex;justify-content: flex-end;">
				<button :disabled="true" style="width: 90%; background-color: #a3d1fe;color: white;">已完成</button>
			</view>
		</view>
		<!-- 完成弹出框 -->
		<uni-popup class="finish-popup" ref="popup" type="center">
			<view class="uni-popup__wrapper center">
				<view class="popup_box">
					<view style="margin-top: 10px;">
						<view class="popup_box_over">结束订单</view>
					</view>
					<view class="popup_box_list">
						<text style="margin-left: 20px;">备注：</text>
						<view class="register-remark">
							<textarea v-model="remark" class="register-input-textarea"
								placeholder="请对维修结果进行详细描述"></textarea>
						</view>
					</view>
					<view class="popup_box_list">
						<text style="margin-left: 20px;">附件：</text>
						<!-- 图片附件 -->
						<view class="property_wattanty_img">
							<view>
								<view class="item-num">
									<view class="upload-img">
										<!-- 预览缩略图 -->
										<view class="q-image-wrap">
											<!-- 图片缩略图  -->
											<block>
												<view class="item" v-if="photoFiles != ''">
													<image class="q-image" :src="photoFiles" mode="aspectFill"
														:data-cur="imgItem.url" @tap="refundPicPreView"></image>
													</image>
													<!-- 移除图片的按钮  -->
													<view class="q-image-remover" @tap="removeImage">
														<image src=".." mode=""></image>
													</view>
												</view>
											</block>
											<!-- 添加图片图标 -->
											<view class="item" @tap="getUploadImg" v-if="photoFiles == ''">
												<image style="width: 80px;height: 80px;"
													src="http://101.206.123.213:7051/static/image/common/添加图片.png">
												</image>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<button type="default" @click="orderFinish"
						style="width: 90%; background-color: #1884eb;color: white;margin-bottom: 10px;">完成</button>
				</view>
			</view>
		</uni-popup>
		<!-- 拒绝弹出框 -->
		<uni-popup class="finish-popup" ref="refuse" type="center">
			<view class="uni-popup__wrapper center">
				<view class="popup_box">
					<view class="popup_box_list">
						<view style="margin-top: 10px;">
							<view class="popup_box_over">拒绝服务</view>
						</view>
					</view>
					<view class="popup_box_list">
						<text style="margin-left: 20px;">备注：</text>
						<view class="register-remark">
							<textarea v-model="remark" class="register_input_textarea"
								placeholder="请填写拒绝原因"></textarea>
						</view>
					</view>
					<button type="default" @click="orderRefuse"
						style="width: 90%; background-color: #1884eb;color: white;margin-bottom: 10px;">完成</button>
				</view>
			</view>
		
		</uni-popup>
	</view>
	</view>
</template>

<script>
	import {
		getRecord,updateRecord,changeStatus
	} from '@/common/js/api/serviceRecord.js';
	import {
		getDicts
	} from '@/common/js/api/dict/data.js';
	import {
		listUser
	} from '@/common/js/api/user.js';
	import {
		pathToBase64
	} from 'image-tools'

	export default {
		data() {
			return {
				//上传图片列表
				photoFiles: "",
				recordList: [],
				//服务状态字典
				statusOptions: [],
				//登陆人员基本信息
				userInfo: [],
				serviceId: '',
				remark: ''
			}
		},
		onLoad(options) {
			this.serviceId = options.serviceId
			this.getServiceListById(this.serviceId)
			this.getDictsList()
			this.userInfo = uni.getStorageSync('userInfo')
		},
		methods: {
			//上传图片
			getUploadImg: function(e) {
				let that = this
				let urls = ""
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: function(res) {
						urls = res.tempFilePaths[0]
						uni.compressImage({
							src: urls,
							quality: 10,
							success: res => {
								pathToBase64(res.tempFilePath).then(base64 => {
									that.photoFiles = base64
								})
							},
						})
					},
					fail() {
						uni.showToast({
							title: "照片选择失败",
							icon: "none",
							duration: 2000
						})
					}
				})
			},
			/**
			 * 图片点击预览
			 */
			// refundPicPreView(e) {
			// 	var current = e.currentTarget.dataset.cur
			// 	var urls = []
			// 	this.photoFiles.forEach(el => {
			// 		urls.push(el.url)
			// 	})
			// 	uni.previewImage({
			// 		current: current,
			// 		urls: urls
			// 	})
			// },

			/**
			 * 删除图片
			 */
			removeImage: function() {
				this.photoFiles = ""
			},
			//获取报修详情
			getServiceListById(serviceId) {
				getRecord(serviceId).then(res => {
					this.recordList = res.data
				})
			},
			//获取字典信息
			getDictsList() {
				getDicts('t_service_status').then(res => {
					this.statusOptions = res.data
				});
				getDicts('t_staff_type').then(res => {
					this.typeOptions = res.data
				})
			},
			send() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认接受该订单',
					success: function(res) {
						if (res.confirm) {
							let serviceStatus = 1
							changeStatus(that.serviceId, serviceStatus).then(res => {
								//报修记录页面
								uni.navigateBack({
									delta: 1
								});
							})
						} else if (res.cancel) {
						}
					}
				})
			},
			openPupop() {
				this.$nextTick(function() {
					this.$refs.popup.open()
				})
			},
			orderFinish(e) {
				let data = {
					'remark': this.remark,
					'finishImg': this.photoFiles,
					'serviceStatus': 2,
					'serviceId': this.serviceId
				}
				updateRecord(data).then(res => {
					//报修记录页面
					uni.navigateBack({
						delta: 1
					});
					this.$nextTick(function() {
						this.$refs.popup.close()
					})
				})
			},
			refuse(){
				this.$nextTick(function() {
					this.$refs.refuse.open()
				})
			},
			orderRefuse(e) {
				if(this.remark === null || this.remark === ""){
					uni.showToast({
						icon: 'none',
						title: "拒绝原因不能为空"
					})
				}else{
				
			    let data = {
			     'serviceId': this.serviceId,
			     'serverId': null,
			     'serviceName': '',
			     'serverPhone': '',
			     'serviceStatus': 0,
			     'remark':this.recordList.remark + '/' +this.recordList.serviceName + this.remark,
			    }
			    updateRecord(data).then(res => {
			     //报修记录页面
			     uni.navigateBack({
			      delta: 1
			     });
			     this.$nextTick(function() {
			      this.$refs.popup.close()
			     })
			    })
				}
			   },
		}
	}
</script>

<style lang="scss">
	page {
		background-color: white;
	}

	.detail_list {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: white;
	}

	.detail_item {
		width: 90%;
		height: 20%;
		padding-top: 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #999999;
		font-size: 14px;
	}

	.detail_item_img,
	.detail_item_des {
		width: 90%;
		height: 25%;
		display: flex;
		padding-top: 20px;
		flex-direction: column;
		justify-content: space-between;
		color: #999999;
		font-size: 14px;
	}

	.detail_item_des {
		margin-bottom: 200px;
	}

	.img {
		padding-top: 20px;
	}

	.detail_item_img image {
		width: 80px;
		height: 80px;
		border-radius: 5px;
	}

	.detail_item_infos {
		color: #000000;
		font-size: 14px;
	}

	.detail_item_info {
		color: #000000;
		font-size: 14px;
		word-break: break-all;
		padding-top: 20px;
	}

	.service_info {
		width: 90%;
		padding-top: 20px;
		display: flex;
		justify-content: space-between;
	}

	.submitButton {
		width: 100%;
		height: 20%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		position: fixed;
		bottom: 40px;
	}

	.popup_box {
		width: 100%;
		height: 40%;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		background-color: white;
		border-radius: 10rpx;
	}


	.popup_box_top {
		width: 90%;
		height: 15%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.popup_box_cancel {
		color: #999999;
	}

	.popup_box_sure {
		color: #1884eb;
	}

	.popup_box_search {
		width: 90%;
		height: 10%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #eeeeee;
		border-radius: 5px;
	}

	.popup_box_list {
		width: 100%;
		display: flex;
		flex-direction: column;
		margin-top: 10px;
	}

	.box_list_line {
		width: 90%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.checked_radio_checked {
		color: #1884eb;
	}

	.line_name {
		color: #000000;
		font-size: 14px;
		text-align: center;
		font-weight: bold;
	}

	.line_type {
		font-family: PingFang SC;
		color: #999999;
		font-size: 12px;
		text-align: right;
		padding-left: 10px;
	}

	.property_wattanty_img {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		font-size: 14px;
		line-height: 40px;
		width: 90%;
		margin: auto;
	}

	.item-num .upload-img .q-image-wrap {
		display: flex;
		/* height: 500rpx; */
		flex-wrap: wrap;
	}

	.item-num .upload-img .q-image-wrap .item {
		position: relative;
		height: 200rpx;
		width: 200rpx;
		margin-right: 20rpx;
	}

	.item-num .upload-img .q-image-wrap .item .q-image {
		height: 100rpx;
		width: 100rpx;
	}

	.item-num .upload-img .q-image-wrap .item .q-image-remover {
		width: 0;
		height: 0;
		border-top: 33rpx solid #bfde85;
		border-left: 33rpx solid transparent;
		position: absolute;
		top: 0;
		right: 0;
	}


	.item-num .upload-img .q-image-wrap .item .q-image-remover image {
		width: 24rpx;
		height: 24rpx;
		position: absolute;
		top: -60rpx;
		right: 4rpx;
	}

	.register-remark {
		width: 90%;
		height: 100px;
		background-color: #eeeeee;
		margin: auto;
		margin-top: 10px;
		border-radius: 5px;
	}

	.register-input-textarea {
		padding: 15px 0px 0px 15px;
		font-family: PingFang SC;
		color: #999999;
		font-size: 12px;
	}

	.popup_box_over {
		color: #000000;
		font-size: 16px;
		text-align: center;
		font-weight: bold;
	}
	.register-remark {
		width: 90%;
		background-color: #eeeeee;
		margin: auto;
		margin-top: 20px;
		margin-bottom: 20px;
		border-radius: 5px;
	}
	
	.register_input_textarea {
		height: 100px;
		padding: 15px 0px 0px 15px;
		font-family: PingFang SC;
		color: #999999;
		font-size: 12px;
	}
</style>
